<template>
  <van-pull-refresh v-model="refreshing" @refresh="OnRefresh">
    <van-list v-model:loading="loading" :finished="finished" :offset="10" finished-text="没有更多了" @load="OnLoad">

      <div class="item" v-for="item in List" :key="item.id">
        <p>{{item.createtime_text}}，{{item.total}}</p>
        <p>金额：{{item.total}}</p>
        <p>时间：{{item.createtime_text}}</p>
      </div>


    </van-list>

  </van-pull-refresh>
</template>

<script setup>
const { proxy } = getCurrentInstance()
let business = proxy.$business // 获取业务逻辑
const List = ref([]); // 列表数据
const page = ref(1);  /// 当前页码
const refreshing = ref(false); // 刷新状态
const loading = ref(false); // 加载状态
const finished = ref(false); // 加载状态

//刷新的方法
const OnRefresh = () => {
  // 清空查询参数
  page.value = 1;
  List.value = [];
  finished.value = false;
  loading.value = true;
  refreshing.value = true;


  setTimeout(OnLoad, 1500);

}

const OnLoad = async () => {
  // 判断是否为加载中的状态
  if (refreshing.value) {
    refreshing.value = false;
  }

  //请求参数
  var params = {
    busid: business.value.id,
    page: page.value
  }


  var result = await proxy.$POST({ url: '/business/record', params })

  // console.log(123456);
  // return false
  // 请求发送完毕后，加载状态也就完毕了
  console.log(result.data);
  List.value = refreshing.value
    ? result.data.list
    : [...List.value, ...result.data.list]

  // 判断是否还有数据（假设每页10条）
  if (result.data.length < 10) {
    finished.value = true
  } else {
    page.value++ // 递增页码（重要！）
  }

  if (result.code == 0) {
    // 如果没有更多数据了 就说明已经加载到底了....
    finished.value = true;

    proxy.$fail(result.msg);

    return false
  }
}

</script>

<style scoped>
.item {
  background: #fff;
  width: 100%;
  text-indent: 1.5em;
  font-size: 1em;
  padding: 10px 0;
  border-bottom: 1px solid #eaeaea;
}
</style>